<script>
export default {
  name: 'Pricing'
}
</script>

<template>
  <!--START PRICING-->
  <section class="section bg-light" id="pricing">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 offset-lg-2">
          <h1 class="section-title text-center">Our Pricing</h1>
          <div class="section-title-border margin-t-20"></div>
          <p
            class="section-subtitle font-secondary text-muted text-center padding-t-30"
          >Call to action pricing table is really crucial to your for your business website. Make your bids stand-out with amazing options.</p>
        </div>
      </div>
      <div class="row margin-t-50">
        <div class="col-lg-4">
          <div class="text-center pricing-box">
            <h4 class="text-uppercase">Economy</h4>
            <h1>$9.90</h1>
            <h6 class="text-uppercase text-muted">Billing Per Month</h6>
            <div class="plan-features margin-t-50">
              <p>
                Bandwidth:
                <b class="text-custom">1GB</b>
              </p>
              <p>
                Onlinespace:
                <b class="text-custom">50MB</b>
              </p>
              <p>
                Support:
                <b class="text-custom">No</b>
              </p>
              <p>
                <b class="text-custom">1</b> Domain
              </p>
              <p>
                <b class="text-custom">No</b> Hidden Fees
              </p>
            </div>
            <a href="#" class="btn btn-custom margin-t-30">Join Now</a>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="text-center pricing-box bg-white price-active">
            <div class="ribbon-box">
              <span>Popular</span>
            </div>
            <h4 class="text-uppercase">Deluxe</h4>
            <h1>$19.90</h1>
            <h6 class="text-uppercase text-muted">Billing Per Month</h6>
            <div class="plan-features margin-t-50">
              <p>
                Bandwidth:
                <b class="text-custom">10GB</b>
              </p>
              <p>
                Onlinespace:
                <b class="text-custom">500MB</b>
              </p>
              <p>
                Support:
                <b class="text-custom">Yes</b>
              </p>
              <p>
                <b class="text-custom">10</b> Domain
              </p>
              <p>
                <b class="text-custom">No</b> Hidden Fees
              </p>
            </div>
            <a href="#" class="btn btn-custom margin-t-30">Join Now</a>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="text-center pricing-box">
            <h4 class="text-uppercase">Ultimate</h4>
            <h1>$29.90</h1>
            <h6 class="text-uppercase text-muted">Billing Per Month</h6>
            <div class="plan-features margin-t-50">
              <p>
                Bandwidth:
                <b class="text-custom">100GB</b>
              </p>
              <p>
                Onlinespace:
                <b class="text-custom">2 GB</b>
              </p>
              <p>
                Support:
                <b class="text-custom">Yes</b>
              </p>
              <p>
                <b class="text-custom">Unlimited</b> Domain
              </p>
              <p>
                <b class="text-custom">No</b> Hidden Fees
              </p>
            </div>
            <a href="#" class="btn btn-custom margin-t-30">Join Now</a>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--ENd PRICING-->
</template>